﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>首页</title>
    <link href="../cssests/bootstrap/css/bootstrap.css" rel="stylesheet" />
    <link href="../cssests/themes/icon.css" rel="stylesheet" />
    <link href="../css/index.css" rel="stylesheet" />
    <script src="../cssests/js/jquery.min.js"></script>
    <script src="../cssests/bootstrap/js/bootstrap.js"></script>
</head>
<body>
    <div class="maindiv">
        <div class="header">
            <div class="headerLeft">
                <div>
                    <i class="icon-user" style="margin-left:10px;"></i><span style="margin-left:5px;">admin</span>
                    <span style="margin-left:10px;">欢迎来到我的网站</span>
                </div>
          </div>
            <div class="headerCenter">
                <div>
                    <marquee><span>温馨提示：</span>本站只供学习，帮助新手快速入门。若有任何问题，欢迎留言，我们将在第一时间内给予你满意的答复。</marquee>
                </div>
            </div>
            <div class="headerRight">
                  <div><a href="../html/login.html" >登录</a></div>
                  <div><a href="../html/index.html" >注册</a></div>
            </div>
        </div>
        <div class="content" >
            <div id="leftMenu">
                <ul class="menu">
                    <li class="tit">系统管理</li>
                    <li class="content1">
                        <ul>
                            <li><a href="1.html" target="main">广州小蛮腰1~~</a></li>
                            <li><a href="2.html" target="main">广州小蛮腰2~~</a></li>
                            <li><a href="3.html" target="main">广州小蛮腰3~~</a></li>
                            <li><a href="4.html" target="main">广州小蛮腰4~~</a></li>
                        </ul>
                    </li>
                </ul>
                <ul class="menu">
                    <li class="tit">用户管理</li>
                    <li class="content1">
                        <ul>
                            <li>广州小蛮腰1~~</li>
                            <li>广州小蛮腰2~~</li>
                            <li>广州小蛮腰3~~</li>
                            <li>广州小蛮腰4~~</li>
                        </ul>
                    </li>
                </ul>
                <ul class="menu">
                    <li class="tit">权限管理</li>
                    <li class="content1">
                        <ul>
                            <li>广州小蛮腰1~~</li>
                            <li>广州小蛮腰2~~</li>
                            <li>广州小蛮腰3~~</li>
                            <li>广州小蛮腰4~~</li>
                        </ul>
                    </li>
                </ul>
            </div>
            <div class="contentCenter">
                <iframe name="main" id="main" frameborder="0" scrolling="no"></iframe>
            </div>
            <div class="contentRight">

            </div>
        </div>
        <div class="footer">

        </div>
    </div>
</body>
</html>
<script src="../cssests/js/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
    $(function () {
        //先隐藏所有的 内容菜单
        $(".content1").hide();
        //为菜单项 设置 点击方法
        $(".tit").click(function () {
            debugger;
            //被点击的菜单项的下一个兄弟节点（内容菜单） 向下展开显示
            if ($(this).parent().find('li').eq(1).attr('style') != "display: none;") {
                $(this).parent().children(".content1").slideUp();
                $(this).find('i').remove();
                if ($(this).find('i').length == 0) {
                    $(this).append('<i class="icon-chevron-down" style="float:right;"></i>');
                }
            } else {
                $(this).next().slideDown().fadeIn(3000)
                               //被点击菜单项 的父元素(ul) 的 其它兄弟节点 的 内容菜单 都 向上隐藏
                               .parent().siblings().children(".content1").slideUp();//.fadeOut(3000)
                $(this).find('i').remove();
                if ($(this).find('i').length == 0) {
                    for (var j = 0; j < $('.tit').length; j++) {
                        if ($($('.tit')[j]).text() == $(this).text()) {
                            $(this).append('<i class="icon-chevron-up" style="float:right;"></i>');
                        } else {
                            $($('.tit')[j]).find('i').remove();
                            $($('.tit')[j]).append('<i class="icon-chevron-down" style="float:right;"></i>');
                        }
                    }        
                }
            }
        })
        //找到第一个 菜单项 的 下一个兄弟节点（内容菜单），并显示
        .first().next().show();
        for (var i = 0; i < $('.content1').length; i++) {
            if ($($('.content1')[i]).attr('style') == "display: none;") {
                $($('.content1')[i]).parent().find('li').eq(0).append('<i class="icon-chevron-down" style="float:right;"></i>');
            } else {
                $($('.content1')[i]).parent().find('li').eq(0).append('<i class="icon-chevron-up" style="float:right;"></i>');
            }
        }
    });
</script>